<template>
  <div class="contextmenu">
    <table>
      <thead>
        <tr>
          <th>框架名称</th>
          <th>使用人数</th>
          <th>占比</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(d,i) in list" :key="d.name"
          @contextmenu.prevent="openMenu($event,i)"
        >
          <td>{{ d.name }}</td>
          <td>{{ d.num }}</td>
          <td>{{ d.percent }}</td>
        </tr>
      </tbody>
    </table>
    <ul
      class="menu"
      :style="{'left':x+'px','top':y+'px'}"
      v-show="show"
    >
      <li @click="del">删除</li>
      <li v-if="currentIndex>0" @click="setTop">置顶</li>
    </ul>
  </div>
</template>

<script>
  import list from '../views/data.js'
  export default {
    data(){
      return {
        list,
        x:0,//右键菜单的位置
        y:0,
        currentIndex:-1,
        show:false
      }
    },
    methods:{
      openMenu(event,index){
        this.x=event.clientX;
        this.y=event.clientY;
        this.show=true;
        this.currentIndex=index;
      },
      del(){
        this.show=false;
        this.list.splice(this.currentIndex,1)
      },
      setTop(){
        const delArr = this.list.splice(this.currentIndex,1)
        this.list.unshift(delArr[0])
        this.show=false
      }
    }
  }
</script>

<style lang="sass" scoped>
.contextmenu table
  width: 100%
  border-collapse: collapse
  & th,
  & td
    padding: 5px
    border: 1px solid #ccc
  & tbody tr:hover td
    background: #f9f9f9
.menu
  position: fixed
  border: 1px solid #eee
  background: #ccc
  box-shadow: 0 0 5px 0 #ccc
  & li
    padding: 0 20px
    line-height: 30px
    text-align: center
    cursor: pointer
  & li:hover
    background: #ccc
  & li+li
    border-top: 1px solid #eee
</style>
